<script setup lang="ts">
import { useDebounceFn } from '@vueuse/core'
import { ref } from 'vue'
import { PageTable } from '@/components/common/pagetable'
import Select from '@/components/common/Select.vue'
import TextInput from '@/components/common/TextInput.vue'
import { Search, Star } from '@/components/icons'
import { getReadingQuestionGroupList, toggleReadingQuestionGroupStatus } from '@/request/teacher/bank'

const name = ['教材类型', '篇目名称', '对应年级', '难度', '使用次数', '操作']
const searchKeywords = ref('')
const forceRefresh = ref(0)
const textbookType = ref('')
const gradeType = ref('')

// 模拟题库数据
const questionData = ref<{
  readingId: string
  type: string
  title: string
  grade: string
  difficulty: number
  useCount: number
  isForbidden: boolean
}[]>([])

async function fetcher(page: number, pageSize: number) {
  const data = await getReadingQuestionGroupList({
    inClass: 0,
    pageNum: page,
    pageSize,
    search: searchKeywords.value || null,
    textbookType: textbookType.value || null,
    grade: gradeType.value || null,
  })
  questionData.value = data.entry.readingList.ins.map(item => ({
    readingId: item.readingId,
    type: item.type,
    title: item.name,
    grade: item.grade || '未分类',
    difficulty: item.difficulty,
    useCount: item.count,
    isForbidden: item.isForbidden,
  }))

  return {
    total: data.entry.total,
    page,
    pageSize,
  }
}

// 渲染星级难度
function renderStars(ind: number, difficulty: number) {
  if (ind > difficulty) {
    return '#e4e4e4'
  }
  if (difficulty < 3) {
    return 'var(--primary-color-300)'
  }
  return 'var(--primary-color)'
}
const handleFilterUpdate = useDebounceFn(() => forceRefresh.value++, 600)

// 启用/禁用题组
async function handleDeleteQuestionGroup(item: {
  readingId: string
  isForbidden: boolean
}) {
  await toggleReadingQuestionGroupStatus({ readingId: item.readingId, isForbidden: !item.isForbidden })
  forceRefresh.value++
}
</script>

<template>
  <div class="card-area filter-options">
    <Select
      v-model:model-value="textbookType" label="教材:" placeholder="全部类型" :options="[
        {
          label: '全部类型',
          value: '',
        },
        {
          label: '人教版',
          value: '人教版',
        }, {
          label: '部编版',
          value: '部编版',
        }]" @update:model-value="forceRefresh++"
    />
    <Select
      v-model:model-value="gradeType" label="年级:" placeholder="全部年级" :options="[{
        label: '全部年级',
        value: '',
      }, {
        label: '一年级',
        value: '一年级',
      }, {
        label: '二年级',
        value: '二年级',
      }, {
        label: '三年级',
        value: '三年级',
      }, {
        label: '四年级',
        value: '四年级',
      }, {
        label: '五年级',
        value: '五年级',
      }, {
        label: '六年级',
        value: '六年级',
      }]" @update:model-value="forceRefresh++"
    />
    <TextInput v-model="searchKeywords" label="搜索:" placeholder="文章关键词" @update:model-value="handleFilterUpdate">
      <template #suffix>
        <Search />
      </template>
    </TextInput>
  </div>
  <div class="filter-result">
    <PageTable v-model:force-refresh="forceRefresh" :fetcher="fetcher" :default-page-size="4">
      <template #header>
        <div class="header">
          <div v-for="i in name" :key="i" class="header-item">
            {{ i }}
          </div>
        </div>
      </template>
      <template #default>
        <div v-for="(item, index) in questionData" :key="index" class="data-row">
          <div class="data-item type-tag">
            <span class="tag" :class="item.type === '阅读' ? 'reading-tag' : 'preview-tag'">
              {{ item.type }}
            </span>
          </div>
          <div class="data-item title">
            {{ item.title }}
          </div>
          <div class="data-item time">
            {{ item.grade }}
          </div>
          <div class="data-item">
            <Star v-for="i in 5" :key="i" :stroke="renderStars(i, item.difficulty)" />
          </div>
          <div class="data-item count">
            {{ item.useCount }}
          </div>
          <div class="data-item actions">
            <router-link class="action-btn edit-btn" :to="`/homework/edit?readingId=${item.readingId}&readingTitle=${item.title}`">
              作业
            </router-link>
            <router-link class="action-btn edit-btn" :class="{ 'edit-btn-forbidden': item.isForbidden }" :to="item.isForbidden ? '' : `/bank/edit/${item.readingId}`">
              编辑
            </router-link>
            <span
              class="action-btn delete-btn" :class="{ 'delete-btn-forbidden': item.isForbidden }"
              @click="handleDeleteQuestionGroup(item)"
            >{{ item.isForbidden ? '启用' : '禁用' }}</span>
          </div>
        </div>
      </template>
    </PageTable>
  </div>
</template>

<style src="../../../styles/bank-manage.css" scoped></style>
